<template>
  <div>
    <div class="card-global" style="margin-bottom: 10px">
      <div style="width: 60%;display: flex;justify-content: space-around">
        <input v-model="data.name" class="class-input"  placeholder="课程名"/>
        <input v-model="data.number" class="class-input"  placeholder="编号"/>
        <input v-model="data.teacher" class="class-input"  placeholder="教师名"/>
      </div>
      <div style="width: 30%;display: flex;justify-content: flex-end;padding: 10px 0px">
      <button style="margin-right: 10px" class="button-global" @click="load">查询</button>
      <button style="margin-right: 10px" class="button-global" @click="reset">刷新</button>
      </div>
    </div>
    <div class="card" style="margin-bottom: 10px;box-shadow: 0 0 5px white;background-color: rgba(255,255,255,0.18)">
      <el-table :data="data.tableData" style="width: 100%;">
        <el-table-column prop="id" label="序号"/>
        <el-table-column prop="name" label="课程名称" />
        <el-table-column prop="number" label="课程编号" />
        <el-table-column prop="despt" label="课程描述" />
        <el-table-column prop="time" label="课时"  />
        <el-table-column prop="teacher" label="任课教师" />
        <el-table-column v-if="user.role==='STUDENT'">
          <template #default="scope">
            <button class="button-global" style="margin: 5px 0 " @click="selectCourse(scope.row)">选课</button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="card" style="box-shadow: 0 0 5px white;width: 0;background-color: transparent">
      <el-pagination v-model:current-page="data.pageNum" v-model:page-size="data.pageSize"
                     @current-change = "handleCurrentChange"
                     layout="prev, pager, next" :total="data.total"
      />
    </div>
    <el-dialog v-model="data.formVisible" title="课程信息" width="40%">
      <el-form :model="data.form" :rules="rules" ref="formRef" label-width="100px" label-position="right" >
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="data.form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程编号" prop="number">
          <el-input v-model="data.form.number" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课程描述" >
          <el-input v-model="data.form.despt" autocomplete="off" />
        </el-form-item>
        <el-form-item label="课时" >
          <el-input v-model="data.form.time" autocomplete="off" />
        </el-form-item>
        <el-form-item label="任课教师" prop="teacher" >
          <el-input v-model="data.form.teacher" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.formVisible=false">关闭</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {reactive,ref} from "vue";
import {Search } from '@element-plus/icons-vue'
import request from "@/utils/request";
import router from "../../router";
import {ElMessage, ElMessageBox} from "element-plus";

const user=JSON.parse(localStorage.getItem("student-user"))
const formRef=ref();
const handleCurrentChange = ()=>{
  load()
}

const data = reactive({
  name:'',
  number: '',
  teacher: '',
  tableData:[],
  total: 0,
  pageNum: 1, //当前的页码
  pageSize: 10, // 每页个数
  formVisible: false,
  form: {}
})
const selectCourse=(raw)=>{
  request.post("/courseSel/add",{

      courseName: raw.name,
      studentName:  user.name,
      courseNum: raw.number,
      studentId: user.id,
      courseId: raw.id

      }

  ).then(res=>{
    if (res.code==='200')
    ElMessage.success('选课成功')
    else if (res.code==='500')
      ElMessage.success('你已经选了此课')
    else{
      ElMessage.error('未知错误')
    }
  })
}
const  load =() =>{
  request.get("/course/selectPage", {
    params:{
      pageNum: data.pageNum,
      pageSize:data.pageSize,
      name: data.name,
      number: data.number,
      teacher: data.teacher
    }} ).then(res => {
    data.tableData = res.data?.list || []
    data.total = res.data?.total || 0
  })
}
const reset=() => {
  data.name = ''
  data.number = ''
  data.teacher = ''
  load()
}
const  handleAdd=()=>{
  data.form={}
  data.formVisible=true
}
const  rules = reactive({
  name:[
    {required: true,message:'请输入课程名',trigger:'blur'},
  ],
  teacher:[
    {required: true,message:'请输入任课老师姓名',trigger:'blur'},
  ],
  number:[
    {required: true,message:'请输入课程编号',trigger:'blur'},
  ]
})
const  save =() =>{
  formRef.value.validate((valid)=> {
    if (valid)
    {
      request.request({
        url: data.form.id ? '/course/update' : '/course/add',
        method: data.form.id ? 'PUT' : 'POST',
        data: data.form
      }).then(res => {
        if (res.code === '200') {
          load()
          data.formVisible = false
          ElMessage.success('操作成功')
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

const editHandler=(row)=>{
  data.form = JSON.parse(JSON.stringify(row))
  data.formVisible = true
}
const delHandler=(id)=>{
  ElMessageBox.confirm(
      '此操作会永久删除数据，是否确认?',
      '注意！',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        request.delete('/course/delete/'+ id).then(res=>{
          if(res.code==='200'){
            load()
            ElMessage.success('删除成功')
          } else{
            ElMessage.error(res.msg)
          }
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除',
        })
      })
}
load()
</script>

<style scope>
.class-input{
  border: none;
  height: 30px;
  background-color: transparent;
  width:40%;
  border-radius: 15px;
  box-shadow: 0 0 4px #cccccc;
  margin: 20px;

}
.class-input::placeholder{
  padding-left: 10px;
  color: rgba(240, 249, 255, 0.47);
  font-size: 14px;
}
.class-input:focus{
  outline: none;
  padding-left: 10px;
  border-color: #03a9f4;
  box-shadow: 0 0 10px #5ccaff;
  color: white;
  font-family: 黑体;
  font-size: 16px;
}
/*针对element的修改*/
.el-table__row{
  background-color: transparent!important;
  color: white;
}
.el-table{
  background-color: transparent!important;
  --el-table-row-hover-bg-color: rgba(150, 141, 141, 0.21) !important;
}
.el-table__header-wrapper{

  background-color: transparent!important;
  --el-table-header-bg-color: transparent !important;
}
.el-table tr {
  background-color: transparent;
}
.el-pagination{
  --el-pagination-bg-color: #fff9f900;
  --el-pagination-button-disabled-bg-color: #00000000;
  --el-text-color-primary: #ffffff;
  --el-pagination-button-disabled-color: #ffffff;
}
.el-table thead {
  color: #ffffff;
}
</style>